<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="">
			省份: <select name="" id="provinceId" onchange="changeProvince();">
				<option value="-1">请选择省份</option>
			</select>
			城市: <select name="" id="cityId" onchange="changeCity();">
				<option value="-1">请选择城市</option>
			</select>
			区县:<select name="" id="quId" onchange="changequ();">
				<option value="-1">请选择区县</option>
			<br />
			你选择的是： <label id="selectValue"></label>
		</div>
	</body>
	<script type="text/javascript">
		var provinces = ['福建省','广东省','湖南省'];
		var citys =[				  
				   ['福州市','南平市'],
				   ['东莞市','深圳市'],
				   ['长沙市','邵阳市']			   
				   ];
	    var qu =[
			     ['仓山区','台江区'],
				 ['延平区','建阳区'],
				 ['南城区','万江区'],
				 ['龙华区','福田区'],
				 ['岳麓区','芙蓉区'],
				 ['新宁县','武冈市']
		        ]
		function changeProvince(){
			var provinceObj = document.getElementById('provinceId');
			var cityObj = document.getElementById('cityId');
				cityObj.innerHTML = `<option value="-1">请选择城市</option>`;
				if(provinceObj.value==-1){
					return;
				}
				var city = citys[provinceObj.value];			
				for(var i=0;i<city.length;i++){
					cityObj.innerHTML+=`<option value="`+i+`">`+city[i]+`</option>`;
				}
			}
			function changeCity(){
				var provinceObj = document.getElementById('provinceId');
				var cityObj = document.getElementById('cityId');
				var provinceName = provinces[provinceObj.value];
				var cityName = citys[provinceObj.value][cityObj.value];
			
				var selectObj = document.getElementById('selectValue');
				selectObj.innerText = provinceName+": "+cityName;
			}
			onload = function(){
				//添加省份
				var provinceObj = document.getElementById('provinceId');
				for(var i=0;i<provinces.length;i++){
					provinceObj.innerHTML+=`<option value="`+i+`">`+provinces[i]+`</option>`;
				}
				
		}
	</script>
	
</html>
